<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>图文预览</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <div id="main" style="width: 700px;height:500px;"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
      return{
          typeList: []
      }
  },
  created() {},
  //此时页面上的元素已经渲染完毕
  async mounted() {
    var myChart = echarts.init(document.getElementById("main"));

    const res = await this.$http.get("video/type/nums")

    if (res.status !== 200) {
        return this.$message.error("获取类型列表失败!");
      }
      console.log(res.data);
      this.typeList = res.data;

    myChart.setOption({
        title: {
                text: '视频类别数量比'
            },
        series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            roseType: 'angle',
            data: this.typeList
        }
    ]
})
  },
  methods: {}
};
</script>

<style scoped>
.main{
    position: absolute;
    float: right;
}
.main1{
    position: absolute;
    float: left;
}
</style>